<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>饼状图数据交互</title>
    <!-- 引入 echarts.js -->
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 400px;height:300px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    function hrFun(param) {
        myChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                /* orient: 'vertical',
                 x: 'right',
                 y: 'bottom',
                 textStyle: { //图例文字的样式
                     color: '#0b2b5e',
                     fontSize: 12
                 },*/
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                data: [
                ]
            }]
        });
        myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
        var names = []; //类别数组（用于存放饼图的类别）
        var brower = [];
        $.ajax({
            type: 'get',
            url: 'data.json', //请求数据的地址
            dataType: "json", //返回数据形式为json
            success: function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                $.each(result.list, function(index, item) {
                    names.push(item.value); //挨个取出类别并填入类别数组
                    brower.push({
                        name: item.value,
                        value: item.name
                    });
                });
                myChart.hideLoading(); //隐藏加载动画
                myChart.setOption({ //加载数据图表
                    legend: {
                        data: names
                    },
                    series: [{
                        data: brower
                    }]
                });
            },
            error: function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    }
    hrFun();
</script>
</body>
</html>